<template>
	<view class="content">
		<view class="header">
			<!-- 搜索 -->
			<!-- <view class="search">
				<input class="uni-input" focus placeholder="搜索" @input='searchValue' />
				<view class="screen">
					<view class="icon">
						<image src="https://wx.caobenjiankang.com/image/technicianadd/screen.png" mode="heightFix"></image>
					</view>
					<view class="font24" @click="getData()">
						筛选
					</view>
				</view>
			</view> -->
			<!-- 切换标签 -->
			<view class="tabs">
				<uv-tabs :list="tabsList" :current="current" lineColor="#1DB481" :inactiveStyle="{color:'#333333'}"
					:activeStyle="{color:'#333333'}" @click="tabsClick" :scrollable="false"></uv-tabs>
			</view>
		</view>
		<view class="box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<abnor v-if="dataList.length<=0"></abnor>
				<view class="whole data" v-if="dataList.length > 0">
					<!-- <view class="item" v-for="(item,index) in dataList" :key="index" @click="tos(item.id,item.pay_type)">
						<view class="left" style="margin-bottom: 60rpx;">
							<view class="stuta font28">
								{{statusType[item.pay_type]}}
							</view>
							<view class="u_time" v-if="item.pay_type > 5">
								<view class="icon">
									<image src="https://wx.caobenjiankang.com/image/technicianadd/time.png"
										mode="aspectFit"></image>
								</view>
								<view class="title font28">
									上钟时间：{{item.start_time}}
								</view>
							</view>
						</view>
						<view class="left" style="margin-bottom: 18rpx;flex-direction: column;align-items: unset;">
							<view class="oderNum font28">
								单号：{{item.order_code}}
							</view>
							<view class="d_time font28" v-if="item.pay_type == 7">
								下钟：{{item.end_time}}
							</view>
						</view>
						<view class="left" v-if="item.pay_type == 7">
							<view class="evaluate" @click.stop="to(item.id)">
								<view class="icon">
									<image src="https://wx.caobenjiankang.com/image/technicianadd/contracts.png"
										mode="aspectFit"></image>
								</view>
								<view class="title font28">
									评价
								</view>
							</view>
							<view class="e_time font28">
								结账：{{$u.timeFormat(item.order_end_time, 'yyyy-mm-dd hh:MM')}}
							</view>
						</view>
						<view class="houser" v-if="item.house">
							<view class="icon">
								<image src="https://wx.caobenjiankang.com/image/technicianadd/houser.png" mode="aspectFit">
								</image>
							</view>
							<view class="title font28">
								{{item.house}}
							</view>
						</view>
						<view class="collapse">
							<l-collapse :accordion="true" @click.stop="click">
								<l-collapse-item
									:title="`${item.order_goods[0].goods_name}`+'  '+`${item.order_goods[0].time_long}` +'分钟'"
									titleImg="" :titleImgs="true">
									<view class="contents">
										<view class="left" style="margin-right: 8rpx;">
											<view class="price font28">
												￥{{item.pay_price}}
											</view>
											<view class="k_status font28">
												{{statusType[item.pay_type]}}
											</view>
										</view>
										<view class="left">
											<view class="kaid font28">
												开单时间:
											</view>
											<view class="k_time font28">
												{{item.create_time}}
											</view>
										</view>
									</view>
								</l-collapse-item>
							</l-collapse>
						</view>
					</view> -->
					<view class="item" v-for="(item,index) in dataList" :key="item.id"
						@click="tos(item.id,item.pay_type,item.is_add)" style="position: relative;">
						<view v-if="item.is_add">
							<view class="bell-tag flex-center f-icontext abs"
								style="background:#1DB481;top: 0;left: 0;width: 120rpx;height: 40rpx;border-radius: 16rpx 0 16rpx 0;color: #fff;">
								加钟服务
							</view>
							<view class="space-md"></view>
						</view>
						<view class="left">
							<view class="orderNum font28">
								订单号：{{item.order_code}}
							</view>
							<view class="status font24 fontw">
								{{statusType[item.pay_type]}}
							</view>
						</view>
						<view class="info" v-for="(aitem,aindex) in item.order_goods" :key="aindex">
							<image class="pic" :src="aitem.goods_cover" mode="aspectFill"></image>
							<view class="infoBox">
								<view class="left">
									<view class="title font30 fontw">
										{{aitem.goods_name}}
									</view>
									<view class="num font26">
										x{{aitem.num}}
									</view>
								</view>
								<view class="time font24">
									预约时间：{{item.start_time}}
								</view>
								<view class="time font24">
									项目时长：{{item.time_long}}分钟
								</view>
								<view class="price font24">
									总计：<text class="font24 fontw" style="color: #E82F21;">¥</text><text class="font32"
										style="color: #E82F21;">{{item.pay_price}}</text>
								</view>
							</view>
						</view>
						<view class=""
							style="display: flex;align-items: center;justify-content: space-between;margin-top: 16rpx;">
							<view class="">
								下单人：{{item.user.nickName}}
							</view>
							<view class="">
								下单人号码：{{item.user.phone}}
							</view>
						</view>
						<view class=""
							style="margin-top: 8rpx;display: flex;align-items: center;justify-content: flex-end;">
							<view class="btn" v-if="item.pay_type == 7" @click.stop="jianyi(item.id)">
								建议
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup :show="show" @close="show = false,value3 = '',value4 = ''" mode="center" :round="10">
			<view class="" style="padding: 30rpx;">
				<view class="font36 fontw" style="text-align: center;">
					填写建议
				</view>
				<view class="" style="margin-bottom: 16rpx;background-color: #ddd;border-radius: 16rpx;padding: 8rpx;">
					<input class="uni-input" v-model="value4" @input="onKeyInput" placeholder="请填写状态" />
				</view>
				<view class=""
					style="background-color: #ddd;border-radius: 16rpx;overflow-y: auto;padding: 8rpx;margin: 8rpx 0;height: 300rpx;">
					<textarea v-model="value3" @input="bindTextAreaBlur" placeholder="请填写建议" auto-height="true" maxlength="-1"
						style="min-height: 300rpx;"></textarea>
				</view>
				<view class="btns" @click="tijiao">
					提交
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoen: '',
				tabsList: [{
						name: '全部'
					}, {
						name: '待服务'
					}, {
						name: '服务中'
					}, {
						name: '已完成'
					}, {
						name: '退款中'
					},
					{
						name: '已取消'
					}
				], //切换标签
				current: 0, //标签索引
				dataList: [], //数据
				scrollTop: 0, //初始化滚动高度
				pay_type: 0,
				statusType: {
					'-1': '已取消',
					1: '待支付',
					2: '待服务',
					6: '服务中',
					7: '已完成',
					9: '退款中'
				},
				page: 1,
				last_page: 1,
				show: false,
				value3: '',
				user_id: 0,
				value4: ''
			}
		},
		components: {

		},
		onLoad(op) {
			this.current = op.type || 0
			if (op.type == 0) {
				this.pay_type = 0
			}
			if (op.type == 1) {
				this.pay_type = 2
			}
			if (op.type == 2) {
				this.pay_type = 6
			}
			if (op.type == 3) {
				this.pay_type = 7
			}
			if (op.type == 4) {
				this.pay_type = 9
			}
			if (op.type == 5) {
				this.pay_type = '-1'
			}
		},
		onShow() {
			this.dataList = []
			this.getData()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.dataList = []
			this.getData()
			uni.stopPullDownRefresh()
		},
		methods: {
			async getData() {
				const data = await this.$api.shopowner.orderList({
					page: this.page,
					pay_type: this.pay_type
				})
				console.log(data);
				this.dataList = [...this.dataList, ...data.data]
				this.last_page = data.last_page
			},
			click(e) {
				console.log(e);
			},
			onKeyInput(event) {
				this.value4 = event.target.value
			},
			jianyi(id) {
				this.show = true
				this.user_id = id
				this.value3 = ''
				this.value4 = ''
				console.log(this.value3,this.value4,'this.value3');
			},
			bindTextAreaBlur(e) {
				this.value3 = e.target.value
			},
			async tijiao() {
				if (this.value3 == '') {
					uni.showToast({
						icon: 'error',
						title: '请填写建议',
						duration: 1000
					})
					return
				}
				let data = await this.$api.technicianadd.coachHealthState({
					id: this.user_id,
					suggest: this.value3,
					state: this.value4
				})
				uni.showToast({
					icon: 'success',
					title: '提交成功',
					duration: 1000
				})
				this.show = false
			},
			searchValue(e) {
				this.phoen = e.detail.value
			},
			tabsClick(e) {
				this.current = e.index
				this.phoen = ''
				this.dataList = []
				if (e.index == 0) {
					this.pay_type = 0
				}
				if (e.index == 1) {
					this.pay_type = 2
				}
				if (e.index == 2) {
					this.pay_type = 6
				}
				if (e.index == 3) {
					this.pay_type = 7
				}
				if (e.index == 4) {
					this.pay_type = 9
				}
				if (e.index == 5) {
					this.pay_type = '-1'
				}
				this.getData()
			},
			scrolltolower() {
				if (this.page >= this.last_page) {
					uni.showToast({
						icon: 'error',
						title: '暂无更多',
						duration: 1000
					})
				} else {
					this.page = this.page + 1
					this.getData()
				}
			},
			to(id) {
				uni.navigateTo({
					url: '/user/pages/order/evaluate?id=' + id
				})
			},
			tos(id, current, add) {
				if (current == 2 || current == 3 || current == 1 && add == 1) {
					uni.navigateTo({
						url: '/technicianadd/pages/spring/spring?id=' + id
					})
				}
				if (current == 6) {
					uni.navigateTo({
						url: '/technicianadd/pages/spring/spring?id=' + id + '&current=' + 1
					})
				}
				if (current == 7) {
					uni.navigateTo({
						url: '/technicianadd/pages/detail/detail?id=' + id
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.header {
			background-color: #fff;
			width: 100%;

			.search {
				padding: 16rpx 43rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.uni-input {
					flex: 1;
					height: 66rpx;
					padding-left: 36rpx;

					/deep/.input-placeholder {
						font-size: 24rpx
					}
				}

				.screen {
					display: flex;
					align-items: center;

					.icon {
						margin-right: 8rpx;

						image {
							height: 21rpx;
						}
					}
				}
			}

			.tabs {

				// /deep/.uv-sticky {
				// 	// width: 50%;

				// 	.uv-tabs__wrapper__nav__item {
				// 		width: 200rpx;
				// 	}

				// 	.uv-tabs__wrapper__nav {
				// 		// justify-content: space-between;
				// 	}
				// }
			}
		}

		.box {
			padding: 16rpx 29rpx;

			.scroll-Y {
				height: calc(100vh - 88rpx - var(--status-bar-height));

				.data {
					.item {
						padding: 30rpx;
						background-color: #fff;
						border-radius: 16rpx;
						margin-bottom: 18rpx;

						.left {
							justify-content: space-between;
							padding-bottom: 30rpx;

							.orderNum {
								display: block;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								max-width: 450rpx;
								color: #232A24;
							}

							.status {
								color: #9ade97;
							}
						}

						.info {
							margin-top: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							.pic {
								width: 155rpx;
								height: 155rpx;
								border-radius: 16rpx;
							}

							.infoBox {
								flex: 1;
								margin-left: 20rpx;

								.left {
									padding-bottom: unset;

									.title {
										display: block;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										max-width: 400rpx;
										color: #232A24
									}

									.num {
										color: #3D2C1B;
									}
								}

								.time {
									color: #999999;
								}

								.price {
									color: #999999;
									display: flex;
									align-items: center;
								}
							}

						}
					}

					// .item {
					// 	margin-bottom: 16rpx;
					// 	padding: 17rpx 44rpx 29rpx 43rpx;
					// 	background-color: #fff;
					// 	border-radius: 16rpx;

					// 	.left {
					// 		justify-content: space-between;

					// 		.stuta {
					// 			color: #999999;
					// 		}

					// 		.u_time {
					// 			display: flex;
					// 			align-items: center;

					// 			.icon {
					// 				width: 25rpx;
					// 				height: 25rpx;
					// 				display: flex;
					// 				align-items: center;
					// 				margin-right: 4rpx;

					// 				image {
					// 					width: 25rpx;
					// 					height: 25rpx;
					// 				}
					// 			}

					// 			.title {
					// 				color: #999999;
					// 			}
					// 		}

					// 		.oderNum {
					// 			white-space: nowrap;
					// 			/* 禁止文本换行 */
					// 			overflow: hidden;
					// 			/* 隐藏超出范围的内容 */
					// 			text-overflow: ellipsis;
					// 			/* 使用省略号 */
					// 			margin-bottom: 16rpx;
					// 		}

					// 		.d_time {}

					// 		.evaluate {
					// 			display: flex;
					// 			align-items: center;

					// 			.icon {
					// 				width: 27rpx;
					// 				height: 27rpx;
					// 				display: flex;
					// 				align-items: center;
					// 				margin-right: 4rpx;

					// 				image {
					// 					width: 27rpx;
					// 					height: 27rpx;
					// 				}
					// 			}

					// 			.title {
					// 				color: #1DB481;
					// 			}
					// 		}

					// 		.e_time {}
					// 	}

					// 	.houser {
					// 		display: flex;
					// 		align-items: center;
					// 		padding: 24rpx 0 26rpx 29rpx;

					// 		.icon {
					// 			width: 30rpx;
					// 			height: 29rpx;
					// 			display: flex;
					// 			align-items: center;
					// 			margin-right: 4rpx;

					// 			image {
					// 				width: 30rpx;
					// 				height: 29rpx;
					// 			}
					// 		}

					// 		.title {}
					// 	}

					// 	.collapse {
					// 		position: relative;

					// 		.contents {
					// 			display: flex;
					// 			align-items: center;

					// 			.left {
					// 				.price {
					// 					color: #F85131;
					// 				}

					// 				.k_status {
					// 					color: #02A23E;
					// 				}

					// 				.kaid {
					// 					color: #999999;
					// 				}

					// 				.k_time {
					// 					color: #999999;
					// 				}

					// 			}
					// 		}

					// 		/deep/.l-collapse {
					// 			.l-collapse-item {
					// 				.l-collapse-item__title {
					// 					.l-collapse-item__title-wrap {
					// 						.l-collapse-item__title-box {
					// 							.l-collapse-item__title-img {
					// 								width: 8rpx;
					// 							}

					// 							.l-collapse-item__title-text {
					// 								font-size: 25rpx;
					// 							}
					// 						}
					// 					}

					// 					.l-collapse-item__title-arrow {
					// 						position: absolute;

					// 						.icon-xiala {
					// 							font-size: 40rpx;
					// 						}
					// 					}
					// 				}
					// 			}
					// 		}
					// 	}
					// }
				}
			}
		}
	}

	.l-collapse-item__title-text {
		font-size: 28rpx;
	}

	.btn {
		background-color: #07c160;
		color: #fff;
		border-radius: 18rpx;
		text-align: center;
		width: 200rpx;
		padding: 20rpx 0;
		font-size: 28rpx;
	}

	.btns {
		background-color: #07c160;
		color: #fff;
		border-radius: 18rpx;
		text-align: center;
		width: 100%;
		padding: 20rpx 0;
		font-size: 28rpx;
	}
</style>